import React, { Component } from 'react'

class LifecycleSon extends Component {
    state={
        txt:'hanhan'
    }

    componentWillMount(){
        console.log('组件被实例之前,运行了componentWillMount')
    }


    componentWillReceiveProps(){
        console.log('props值被改变')
    }

    shouldComponentUpdate(nextProps,nextState){
        console.log('shouldComponentUpdate')
        return true

    }

    componentWillUpdate(){
        console.log('组件调用setsteta之前,componentWillUpdate')
    }
    render() {
       
        return (
            <div>
                名字是{this.state.txt}
                <div>年龄：{this.props.age}</div>
                <input type="text" ref="txt"/>
                <button onClick={()=>this.setState({txt:this.refs.txt.value})}>改名字</button>
            </div>
        )
    }
    componentDidUpdate(){
        console.log('组件内部调用setstate之后,componentDidUpdate')
    }

    componentDidMount(){
        console.log('组件被实例之后,运行了componentDidMount')
    }

    componentWillUnmount(){
        console.log('组件被销毁')
    }
}

class Lifecycle extends Component{
    state={
        age:18,
        isShow:true
    }
    render(){
        const {age,isShow} = this.state
        return <div>
          
            <button onClick={()=>this.setState({age:1})}>改变年龄</button>
            <button onClick={()=>this.setState({isShow:false})}>消失</button>

            {
                isShow?<LifecycleSon age={age} />:null
            }
        </div>
    }
}

export default Lifecycle
